import React from "react";
import ReactDOM from "react-dom";
require('./Dialog.less')

class Dialog extends React.Component {

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentWillMount() {

    }

    handleOK() {
        this.props.onClose()
        if (this.props.onOK) {
            this.props.onOK()
        }
    }

    handleCancel() {
        this.props.onClose()
        if (this.props.onCancel) {
            this.props.onCancel()
        }
    }

    toast() {
        const props = this.props
        return (
            <div id="toast">
                <div className="weui-mask_transparent"></div>
                <div className="weui-toast">
                    {/*<i className="weui-icon-success-no-circle weui-icon_toast"></i>*/}
                    <i className="iconfont icon-iconfontjinggao"></i>
                    <p className="weui-toast__content">已完成</p>
                </div>
            </div>
        )
    }

    info() {
        const props = this.props
        const cls = props.type === "new" ? " lux-new" : " "
        return (
            <div>
                <div className="weui-mask"></div>
                <div className={"weui-dialog" + cls}>
                    <div className="weui-dialog__hd"><strong className="weui-dialog__title">{props.title}</strong></div>
                    {props.content && <div className="weui-dialog__bd">{props.content}</div>}
                    {props.htmlContent && <div className="weui-dialog__bd" style={{ textAlign: "left" }} dangerouslySetInnerHTML={props.htmlContent} />}
                    <div className="weui-dialog__ft">
                        <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_primary"
                            onClick={this.handleOK.bind(this)}>{props.okText}</a>
                    </div>
                </div>
            </div>
        )
    }

    confirm() {
        const props = this.props
        return (
            <div>
                <div className="weui-mask"></div>
                <div className="weui-dialog">
                    <div className="weui-dialog__hd"><strong className="weui-dialog__title">{props.title}</strong></div>
                    {props.content && <div className="weui-dialog__bd">{props.content}</div>}
                    {!!props.htmlContent && props.htmlContent}
                    <div className="" style={{ color: '#f00' }}>{props.remarks}</div>
                    <div className="weui-dialog__ft">
                        <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_default"
                            onClick={this.handleCancel.bind(this)}>
                            {props.cancelText}
                        </a>
                        <a href="javascript:;" className="weui-dialog__btn weui-dialog__btn_primary"
                            onClick={this.handleOK.bind(this)}>{props.okText}</a>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        const props = this.props
        let content = null
        if (props.mode === "info") {
            content = this.info()
        } else if (props.mode === "confirm") {
            content = this.confirm()
        } else if (props.mode === "toast") {
            content = this.toast()
        }

        return (
            <div className="Dialog">
                {content}
            </div>
        )
    }
}
module.exports = Dialog
function info(props) {
    const div = document.createElement('div')
    document.body.appendChild(div)
    function close() {
        ReactDOM.unmountComponentAtNode(div)
        document.body.removeChild(div)
    }

    ReactDOM.render(<Dialog onClose={close} mode="info" {...props} />, div)
}
function confirm(props) {
    const div = document.createElement('div')
    document.body.appendChild(div)
    function close() {
        ReactDOM.unmountComponentAtNode(div)
        document.body.removeChild(div)
    }

    ReactDOM.render(<Dialog onClose={close} mode="confirm" {...props} />, div)
}
function toast(props) {
    const div = document.createElement('div')
    document.body.appendChild(div)
    function close() {
        ReactDOM.unmountComponentAtNode(div)
        document.body.removeChild(div)
    }

    ReactDOM.render(<Dialog mode="toast" {...props} />, div)
}
Dialog.info = (props) => {
    return info(props)
}
Dialog.confirm = (props) => {
    return confirm(props)
}
Dialog.toast = (props) => {
    return toast(props)
}